<!--  -->
<template>
  <div class="issue">
    <div class="issue_header">
      <span style="color: #d9d9d9; font-weight: bold">——</span> 常见问题
      <span style="color: #d9d9d9; font-weight: bold">——</span>
    </div>
    <div class="issue_body">
      <ul>
        <li v-for="item in issue" :key="item.id">
          <h3>{{ item.question }}</h3>
          <p>{{ item.answer }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "DetailIssue",
  props: {
    issue: {
      type: Array,
      default() {
        return [];
      },
    },
  },
});
</script>

<style lang="scss" scoped>
.issue {
  width: 100%;
  background-color: #fff;
  margin-top: -28px;
}
.issue_header {
  height: 80px;
  font-size: 36px;
  line-height: 80px;
  width: 100%;
  text-align: center;
}
.issue_body {
  width: 100%;
  padding-bottom: 50px;
}

.issue_body ul h3 {
  padding: 24px 0;
  color: #333;
}
.issue_body ul li {
  padding: 0 40px;
}
.issue_body p {
  color: #999;
}
</style>
